<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>进度条</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
  $(function () {
    $("#progressbar").progressbar({
      //进度条宽度
      width : 300,
      //进度条高度
      height : 40,
      //进度（百分比）
      value : 0,
      //在进度条上显示的文本
      text : '{value}% hello world',
      //设置进度条发生改变（onchange）的事件的动作
      onchange : function (newValue, oldValue) {
        console.log('新值：' + newValue + '，旧值：' + oldValue);
      }
    });
    //2000毫秒后执行指定操作
    setTimeout(function () {
      $('#static-progressbar').progressbar('setValue', 100);
    }, 2000);
    //每200毫秒执行一次指定操作
    setInterval(function () {
      $('#progressbar').progressbar('setValue', $('#progressbar').progressbar('getValue') + 1);
    }, 50);
  });
</script>
</head>
<body>
  <div id="static-progressbar" class="easyui-progressbar" data-options="value: 50" style="width: 350px"></div>
  <div id="progressbar" style="width: 300px">进度条</div>
</body>
</html>